body {
    -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
    -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
    background-color:#fff;
    font-family:'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif;
    font-size:12px;
    height:100%;
    margin:0px;
    padding:0px;
    width:100%;
}
.doc{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
}
.setting-zone .page-song{
    -webkit-transform: translate3d(-30%, 0, 0);
}
.setting-zone .page-setting{
    -webkit-transform: translate3d(-100%, 0, 0);
}
.cat-zone .page-setting{
    -webkit-transform: translate3d(-200%, 0, 0);
}
.cat-zone .page-cat{
    -webkit-transform: translate3d(-100%, 0, 0);
}
.play-zone .page-play{
    -webkit-transform: translate3d(0, -100%, 0);
}
.song-list-zone .page-song-list{
    -webkit-transform: translate3d(-100%, 0, 0);
}


.ui-page{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;

    transition: -webkit-transform .3s ease;
    -webkit-transform: translate3d(0, 0, 0);
}
.page-song{
    z-index: 1;
    left: 0;
}
.page-song-list{
    z-index: 1;
    left: 100%;
    background-color: #eee;
}
.page-setting{
    z-index: 2;
    left: 100%;
}
.page-cat{
    z-index: 2;
    left: 100%;
}
.page-play{
    z-index: 3;
    top: 100%;
}





.ui-nav{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 50px;
    background: #00b4ff;
    font-size: 16px;
    color: #fff;
    line-height: 50px;
}
.ui-nav .item{
    display: inline-block;
    padding: 0 20px;
}
.ui-nav .cur{
    background-color: #0085ca;
}
.ui-nav .btn-setting{
    width: 50px;
    height: 50px;
    background: url(../img/bt_titlebar_setting_normal.png) center center no-repeat;
    float: right;
    background-size: 50px;
}



.ui-content{
    top: 50px;
    right: 0px;
    bottom: 60px;
    left: 0px;
    padding: 0 10px;
    position: absolute;
    overflow: hidden;
    z-index:1;
}
.content-item{
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
    width: 100%;

    transition: -webkit-transform .2s ease;
    -webkit-transform: translate3d(0, 0, 0);
}
.dl-zone .content-cat{
    -webkit-transform: translate3d(-100%, 0, 0);
}
.dl-zone .content-dl{
    -webkit-transform: translate3d(-100%, 0, 0);
}
.content-dl{
    left: 100%;
}
.cat-item{
    position: relative;
    padding: 5px 0;
    margin: 0 10px;
    height: 60px;
    border-bottom: 1px solid #dedede;

}
.cat-item:active{
    background-color: #eee;
}
.cat-item .icon{
    float: left;
    width: 60px;
    height: 60px;
    background-position: center;
    background-size: contain;
}
.cat-item .info{
    position: absolute;
    left: 75px;
    top: 5px;
    height: 60px;
    right: 40px;
    line-height: 1.5;
}
.cat-item .info-title{
    color: #282728;
    font-size: 14px;
    margin-top: 10px;
}
.cat-item .info-desc{
    color: #838383;
    font-size: 12px;
}
.cat-item .more{
    float: right;
    width: 24px;
    height: 60px;
    background: url(../img/btn_more_left_arrow_nor.png) no-repeat left center;
    background-size: 12px;
}




/*setting-page*/
.page-setting{
    color: #31393d;
    font-size: 14px;
}
.btn-return{
    float: left;
    padding-left: 35px;
    height: 50px;

    background: url(../img/bt_return_nor.png) no-repeat 15px center;
    background-size: 7px 12px;
    white-space: nowrap;
}
.page-setting .ui-content{
    bottom: 0;
    overflow: auto;
}
.setting-item{
    padding: 18px 0;
    border-bottom: 1px solid #dfdfdf;
    height: 23px;
    line-height: 23px;
}
.setting-item-desc{
    float: left;
}
.setting-item-lock-btn{
    width: 59px;
    height: 23px;
    background: url(../img/btn_toggle_button_cache_on.png) no-repeat center center;
    background-size: 59px 23px;
    float: right;
}
.setting-item-more{
    float: right;
    width: 24px;
    height: 23px;
    background: url(../img/btn_more_left_arrow_nor.png) no-repeat left center;
    background-size: 12px;
}


.page-cat .ui-content{
    bottom: 0;
    overflow: auto;
}
.cat-sel-item{
    padding: 15px 0;
    border-bottom: 1px solid #dfdfdf;
    height: 21px;
    line-height: 23px;
}
.cat-sel-item-desc{
    float: left;
}
.cat-sel-item-check-btn{
    height: 21px;
    width: 21px;
    background: url(../img/tick_box_list_on.png) no-repeat;
    background-size: 100%;
    float: right;
}
.cat-sel-item-unchecked{
    background-image: url(../img/tick_box_list_off.png);
}



